<template>
  <el-dialog
    :custom-class="'xn-dialog ' + customClass"
    :visible="showDialog"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :modal-append-to-body="modalAppendToBody"
    :append-to-body="appendToBody"
    :show-close="showClose"
    :top="top"
    :fullscreen="fullscreen"
    @close="onCloseDialg"
    @closed="closed">
    <div class="xn-dialog-header" slot="title">
      <div class="xn-dialog-title" v-if="title">{{ title }}</div>
      <slot name="title" v-else></slot>
    </div>
    <div class="xn-dialog-body" v-if="showDialog">
      <slot></slot>
    </div>
    <div slot="footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
    },
    title: {
      type: String,
    },
    top: {
      type: String,
    },
    closeOnClickModal: {
      type: Boolean,
      default: false,
    },

    closeOnPressEscape: {
      type: Boolean,
      default: true,
    },

    modalAppendToBody: {
      type: Boolean,
      default: true,
    },
    appendToBody: {
      type: Boolean,
      default: true,
    },

    showClose: {
      type: Boolean,
      default: true,
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
    customClass: {
      type: String,
      default: '',
    },
    beforeClose: {
      type: Function,
    },
  },
  data() {
    return {
      showDialog: false,
    }
  },
  computed: {},
  watch: {
    visible: {
      immediate: true,
      handler: function (visible) {
        if (!visible) {
          this.onCloseDialg()
        } else {
          this.showDialog = visible
        }
      },
    },
  },
  methods: {
    onCloseDialg() {
      if (this.beforeClose) {
        if (this.beforeClose()) {
          this.closeDialog()
        } else {
          this.$emit('update:visible', true)
        }
      } else {
        this.closeDialog()
      }
    },
    closeDialog() {
      this.showDialog = false
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    closed() {
      this.$emit('closed')
    },
  },
}
</script>

<style lang="scss">
.xn-dialog {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  .el-dialog__header {
    padding: 0;
    position: relative;
    .el-dialog__headerbtn {
      padding: 10px;
      top: 5px;
      right: 15px;
    }
  }
  .el-dialog__body {
    flex: 1;
    overflow: hidden;
    padding: 20px;
  }
  .xn-dialog-header {
    background: #ffffff;
    border-bottom: 1px solid #dedede;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    .xn-dialog-title {
      font-size: 16px;
      color: #333333;
      font-weight: bolder;
      letter-spacing: 1px;
      line-height: 1.5;
    }
  }
  .xn-dialog-body {
    height: 100%;
    overflow: hidden;
  }
}
</style>
